<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>事件修饰符与按键修饰符</title>
</head>
<body>

  <!-- 
    事件修饰符
      @事件名后, 加.xxx来对事件监听进行进一步处理
      .stop: 停止事件冒泡
      .prevent: 阻止事件的默认行为
      .once: 只执行一次
    按键修饰符
      @按钮事件后, 加.xxx来事件监听进行进一步处理
      .keyCode: 监视的是对应的按钮     enter键: 13
      .enter: 监视enter键
  -->
  <div id="test">
    <!-- 点击内部div, 不希望外部div响应点击 -->
    <div style="width: 200px; height: 200px; background: #888;" @click="fn1">
      <div style="width: 100px; height: 100px; background: pink;" @click.stop="fn2"></div>
    </div>
    <!-- 不提交表单 -->
    <form action="/xxx" @submit.prevent="fn3">
      <input type="text" name="username">
      <input type="password" name="password">
      <input type="submit" value="登陆">
    </form>
    <br>
  
    <button @click.once="fn4">只能抢购一次</button>
    <br>
  
    <input type="text" placeholder="点击enter键提示输入内容" @keyup.13="fn5">
    <input type="text" placeholder="点击enter键提示输入内容" @keyup.enter="fn5">
  </div>

  <script src="../js/vue.js"></script>
  <script>
    new Vue({
      el: '#test',
      data: {

      },
      methods: {
        fn1 () {
          alert('外部')
        },
        fn2 () {
          alert('内部')
        },
        fn3 () {
          alert('发送登陆的ajax请求')
        },
        fn4 (){
          alert('发送抢购的请求')
        },
        fn5 (e) {
          // if (e.keyCode!==13) return
          alert(e.target.value)
        }
      }
    })
  </script>
</body>
</html>